import { memo } from 'react';
import { Observer } from 'mobx-react-lite';
import { NavLink } from 'react-router-dom';
import { Space, Button } from 'antd-mobile';
import { session } from './session';
import * as styles from './style.module.less';

function Head_() {
  return (
    <div className={styles.navbar}>
      <Space wrap justify='around'>
        <NavLink to="/Home">home</NavLink>
        <NavLink to="/Home/1">home1</NavLink>
        <NavLink to="/Home/2">home2</NavLink>
        <NavLink to="/Setting">setting</NavLink>
        <NavLink to="/Page1">page1 *</NavLink>
        <NavLink to="/Introduce">Introduce</NavLink>
        <NavLink to="/Introduce/1">introduce1</NavLink>
        <NavLink to="/Introduce/2">introduce2</NavLink>
        <NavLink to="/Server">Server</NavLink>
        <NavLink to="/TestUtils">TestUtils</NavLink>
        <NavLink to="/TestTailwindCss">TestTailwindCss</NavLink>
      </Space>
      <Observer>{
        () => {
          if (session.userId) {
            return (<Button onClick={() => session.logout()}>注销</Button>)
          } else {
            return (<Button onClick={() => session.login('user1')}>登录</Button>);
          }
        }
      }</Observer>
    </div>
  )
}
const Head = memo(Head_);

export default Head;
